<template>
    <div class="container" >
        <ul class="channel-list" style="background: #fff;padding-top:20px;display: none;">
            <li>
                <div class="template-list-right" style="padding:0">
                    <div class="title">
                        <div class="template-list-left">
                            <div class="label-title">报备项目</div>
                            <div class="contrls">{{cusPre.premisesName}}</div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
            </li>
            <li>
                <div class="template-list-right">
                    <div class="title">
                        <div class="template-list-left">
                            <div class="label-title">客户姓名</div>
                            <div class="contrls">{{cusPre.name}}</div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
            </li>
            <li>
                <div class="template-list-right">
                    <div class="title">
                        <div class="template-list-left">
                            <div class="label-title">客户性别</div>
                            <div class="contrls">{{cusPre.genderName}}</div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
            </li>
            <li>
                <div class="template-list-right">
                    <div class="title">
                        <div class="template-list-left">
                            <div class="label-title">客户号码</div>
                            <div class="contrls">{{cusPre.mobile}}</div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
            </li>

            <li>
                <div class="template-list-right">
                    <div class="title">
                        <div class="template-list-left">
                            <div class="label-title">中介机构门店</div>
                            <div class="contrls">{{cusPre.staffCompanyName}}</div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
            </li>
            <li>
                <div class="template-list-right">
                    <div class="title">
                        <div class="template-list-left">
                            <div class="label-title">中介经纪人</div>
                            <div class="contrls">{{cusPre.staffName}}</div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
            </li>

            <li>
                <div class="template-list-right">
                    <div class="title">
                        <div class="template-list-left">
                            <div class="label-title">经纪人电话</div>
                            <div class="contrls">{{cusPre.staffPhone}}</div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
            </li>
            <li>
                <div class="template-list-right">
                    <div class="title">
                        <div class="template-list-left">
                            <div class="label-title">预计到访时间</div>
                            <div class="contrls">{{cusPre.formatHopeVisitTime}}</div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
            </li>
            <li v-for="m in models">
                <div class="template-list-right">
                    <div class="title">
                        <div class="template-list-left">
                            <div class="label-title">{{m.modelColumn}}</div>
                            <div class="contrls">{{m.content}}</div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="pre"><pre>{{copyContent}}</pre></div>
        <div class="footer">
	    	<div class="footer-content">
                <button class="operationBtn btnOne" @click="backDetail">返回报备详情</button>
                <button class="operationBtn btnTwo" :class="{'copy-btn-copyed': cusPre.copyCount > 0}" v-clipboard:copy="copyContent" v-clipboard:success="onCopy" v-clipboard:error="onError">复制报备信息</button>
    		</div>
	    </div>
    </div>
</template>

<script>
import VueClipboard from "vue-clipboard2";
export default {
  components: {
    VueClipboard,
  },
  data() {
    return {
      copyContent: "",
      cusPre: {
        premisesName: "",
        name: "",
        mobile: "",
        staffCompanyName: "",
        hopeVisitTime: "",
      },
      models: [],
    };
  },
  mounted: function() {
    this.cusPre = this.$route.params.cusPre;
    this.initText(this.cusPre);
  },
  methods: {
    initText(cusPre) {
      var _self = this;
      let visitTime = "";
      let companyName = cusPre.staffCompanyName;
      let storeName = cusPre.staffStoreName || "";
      let groupName = cusPre.staffGroupName || "";
      _self.copyContent =
        "报备项目：" +
        cusPre.premisesName +
        "\r\n" +
        "客户姓名：" +
        cusPre.name +
        "\r\n" +
        "客户性别：" +
        cusPre.genderName +
        "\r\n" +
        "客户号码：" +
        cusPre.mobile +
        "\r\n" +
        "分销公司：" +
        companyName +
        " " +
        storeName +
        " " +
        groupName +
        "\r\n" +
        "中介经纪人：" +
        cusPre.staffName +
        "\r\n" +
        "经纪人电话：" +
        cusPre.staffPhone +
        "\r\n" +
        "预计到访时间：" +
        (cusPre.formatHopeVisitTime || "") +
        "\r\n" +
        "报备时间：" +
        cusPre.formatCreateTime +
        "\r\n";

      var url = this.utilHelper.apiUrl + "/api/getReportModelInfoList";
      var body = {};

      body.params = {
        reportId: cusPre.id,
        premisesId: cusPre.premisesId,
        mobile: cusPre.mobile,
        agencyName: cusPre.staffName,
        agencyPhone: cusPre.staffPhone,
        premisesName: cusPre.premisesName,
        customerName: cusPre.name,
        genderName: cusPre.genderName,
        storeName: companyName + " " + storeName + " " + groupName,
        visitTime: cusPre.formatHopeVisitTime,
        createTime: cusPre.formatCreateTime,
      };
      _self.$http.post(url, body).then(
        (response) => {
          var resBody = response.body;

          if (resBody.result == "1") {
            if (resBody.resData.repotModelDetail) {
              _self.copyContent = resBody.resData.repotModelDetail;
            }
            _self.models = resBody.resData.reportModelInfoList;
          }
        },
        (response) => {}
      );
    },
    copyModal() {
      this.$copyText(this.copyContent).then(
        function(e) {
          layer.msg("复制成功");
        },
        function(e) {
          layer.msg("复制失败，请手动复制");
        }
      );
    },
    backDetail() {
      var _self = this;
      _self.$router.replace({
        path: "/customerDetails/" + _self.cusPre.id,
      });
    },
    onCopy() {
      var _self = this;
      _self.cusPre.copyCount += 1;
      layer.msg("复制成功");
    },
    onError() {
      layer.msg("复制失败，请手动复制");
    },
  },
};
</script>

<style scoped>
.contrls {
  text-align: right;
  float: right;
}
.channel-list li {
  height: 35px;
  line-height: 35px;
  padding: 0 15px;
}
.template-list-right {
  padding: 0;
}
.title {
  border-bottom: 1px solid #ccc;
}
.label-title {
  float: left;
}
.btn-block {
  width: 90%;
  height: 40px;
  display: block;
  margin: 36px auto;
  background-color: #ff7900;
  color: #fff;
  font-size: 14px;
  line-height: 40px;
  border-radius: 4px;
}

/*底部按钮*/
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.footer-content .operationBtn {
  float: left;
  width: 50%;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.footer-content .btnOne {
  background-color: #fff;
  border-top: 1px solid #cdcdcd;
  color: #333;
}
.footer-content .btnTwo {
  background-color: #eb6100;
  color: #fff;
}
.footer-content .copy-btn-copyed {
  background-color: #facd91;
}
.footer-content:after,
.personal-info:after,
.other-list:after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  overflow: hidden;
  font-size: 0;
  height: 0;
}
.pre {
  width: 90%;
  background: #fff;
  border: 1px solid #bbb;
  margin: 10px auto;
  min-height: 300px;
  border-radius: 5px;
  padding: 3px;
}
.pre pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>